<template>
  <div class="speech-container">
    <h2>文字转语音</h2>
    <div class="input-section">
      <input class="my-input" v-model="text" placeholder="请输入文字" />
      <button @click="convert" class="convert-button">转换语音</button>
    </div>
    <p v-if="message">{{ message }}</p>
    <audio ref="audioRef" controls :src="audioUrl" class="audio-player"></audio>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      text: '',
      audioUrl: 'http://localhost:9000/SpeechRecognition/voice/5', // 你的音乐文件的基础 URL
      message: ''
    }
  },

  methods: {
    async convert() {
      const res = await axios.post('http://localhost:9000/SpeechRecognition/text-to-speech', this.text );
      if(res.data.success) {
        // 这里应该是失败的情况
        this.message = '语音转换失败'
      } else {
        // 这里是成功的情况
        this.message = '语音转换成功'
      }
    },
  },
}
</script>

<style>
.my-input {
  margin-bottom: 30px;
  margin-right: 30px;
}

.speech-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  position: relative;
  left: -10px;
}

h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.input-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.my-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 14px;
}

.convert-button {
  padding: 10px 20px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.convert-button:hover {
  background-color: #0056b3;
}

.audio-player {
  margin-top: 10px;
  width: 100%;
}
</style>